<template>
  <div class="entry-button" :class="{'entry-button-active':item.active}" @click="clickItem(item)">{{item.text}}</div>
</template>
<script>
export default {
  props:{
    item:{              //组件内容，文字和是否激活
      type:Object,
      default:()=>{}
    },
  },
  methods:{
    clickItem(item){
      this.$emit('change',item)   //触发父组件传入的change方法，数据是当前按钮的整个内容：例如 item={text:'xxx',active:true/false}
    }
  }
}
</script>
<style lang="stylus">
.entry-button
  display flex;
  align-items center;
  justify-content center;
  padding 0 10px;
  color: #f4f4f4;
  min-width: 98px;
  height: 36px;
  border: solid 1px #c9c9c9;
  &:hover
    cursor pointer
.entry-button-active
  background-color: #da0800;
  border: solid 2px #da0800;
</style>
